$(function() {

    //获取用户信息
    $("#userForm").on('submit', function(e) {

        var userdata = $(this).serialize();

        $.ajax({
            method: 'post',
            url: 'http://localhost:3000/users',
            data: userdata,
            success: function(res) {
                console.log(res);
                xuanran();
            },
            error: function() {
                alert('用户添加失败');
            }
        })
        return false;


    })

    xuanran();
    //渲染到列表
    function xuanran() {


        $.ajax({
            type: 'GET',
            url: 'http://localhost:3000/users',
            success: function(res) {
                console.log(res);
                var htmlmessage = template('userTpl', { data: res });
                $('#userBox').html(htmlmessage);

            }
        })


    }
    //编辑按钮添加编辑事件
    $("#userBox").on('click', '.edit', function() {
        var id = $(this).attr('data-id');
        $.ajax({
            type: 'get',
            url: 'http://localhost:3000/users/' + id,
            success: function(res) {
                console.log(res);
                var htmlmess = template('modifyTpl', res);
                $('#modifyBox').html(htmlmess);
            }
        })
    })

    //修改按钮的提交

    $('#modifyBox').on('submit', '#modifyForm', function() {

        var newusermessage = $(this).serialize();
        var id = $(this).attr('data-id')



        $.ajax({
            type: 'put',
            url: 'http://localhost:3000/users/' + id,
            data: newusermessage,
            success: function(res) {
                console.log(res);
                location.reload();
            }
        })
        return false;
    })

    //删除按钮注册事件
    $('#userBox').on('click', '.delete', function() {
        if (confirm("是否确认要删除")) {
            var id = $(this).attr('data-id');
            $.ajax({
                type: 'delete',
                url: 'http://localhost:3000/users/' + id,
                success: function(res) {
                    console.log(res);
                    location.reload();

                }
            })
        }

    })


    //批量删除按钮的显示隐藏
    $('#selectAll').on('change', function() {
        var status = $(this).prop('checked');
        if (status) {
            $('#deleteMany').show();
        } else {
            $('#deleteMany').hide();
        }
        $('#userBox').find('input').prop('checked', status);
    })

    //当前复选框的状态
    $('#userBox').on('change', '.userStatus', function() {

        var inputs = $('#userBox').find('input');
        if (inputs.length == inputs.filter(':checked').length) {

            $('#selectAll').prop('checked', true);
        } else {

            $('#selectAll').prop('checked', false);
        }
        if (inputs.filter(':checked').length > 0) {
            // 显示批量删除按钮
            $('#deleteMany').show();
        } else {
            // 隐藏批量删除按钮
            $('#deleteMany').hide();
        }

    })

    //给批量删除按钮注册点击事件
    $('#deleteMany').click(function() {

        var ids = [];
        var checkeduser = $('#userBox').find('input').filter(':checked');
        checkeduser.each(function(index, element) {
            ids.push($(element).attr('data-id'));
        })
        if (confirm('你确定要全部删除吗？')) {
            $.ajax({
                type: 'delete',
                url: 'http://localhost:3000/users/' + ids.join('-'),
                success: function() {
                    location.reload();
                }
            })
        }

    })

    //图片上传
    $('#modifyBox').on('change', '#avatar', function() {
        // 用户选择到的文件
        // this.files[0]
        var formData = new FormData();
        formData.append('avatar', this.files[0]);

        $.ajax({
            type: 'post',
            url: 'http://39.101.191.123:3000/upload',
            data: formData,
            // 告诉$.ajax方法不要解析请求参数
            processData: false,
            // 告诉$.ajax方法不要设置请求参数的类型
            contentType: false,
            success: function(response) {
                console.log(response)
                    // 实现头像预览功能
                $('#preview').attr('src', response[0].avatar);
                $('#hiddenAvatar').val(response[0].avatar)
            }
        })
    });







})